<h1 mat-dialog-title>Modify {{memberDetail.account}} ({{memberDetail.name}})</h1>
<div mat-dialog-content style="overflow: unset;">
    <form #memberForm="ngForm">
        <mat-checkbox [(ngModel)]="memberDetail.isActive" name="isActive" [checked]="memberDetail.isActive">Active
        </mat-checkbox>
        <br>
        <mat-form-field class="insert-full-width">
            <input matInput type="text" [(ngModel)]="memberDetail.name" name="name" placeholder="Name" required>
        </mat-form-field>
        <br>

        <mat-form-field class="insert-full-width">
            <input matInput #inputMail type="text" maxlength="40" [(ngModel)]="memberDetail.email" name="email"
                placeholder="Email" [errorStateMatcher]="matcher">
            <mat-hint align="end">{{inputMail.value?.length || 0}}/40</mat-hint>
            <mat-error *ngIf="memberForm.hasError('email')">
                Please enter a valid email address
            </mat-error>
        </mat-form-field>
        <br>

    </form>
</div>
<div mat-dialog-actions>
    <button mat-raised-button color="primary" (click)="onNoClick()">No</button>
    <button mat-raised-button color="primary" [disabled]="!memberForm.valid" (click)="onYesClick()">Yes</button>
</div>